<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type = "text">
<button>投票</button>
<script>
    /*
    * 节流操作：
    *   也是在高频操作下，不管用户的操作有多频繁，我们都每隔一段规定的时间，操作一次，只要时间没到，操作就不会生效
    *
    * */
    let btn = document.querySelector("button")
    let count = 0 //声明一个计数器，默认值为0

    //每次只生效一个操作 每隔规定的时间生效一次
    ;(function(){ //立执行函数 保证代码私有性 这样里面声明的flag标记不会被外部修改
        let flag = true //声明一个标记，默认值为true
        btn.onclick = function(){ //生成一个回调函数，将这个回调函数绑定到onclick点击事件当中
            if(!flag) return //函数内部先进行判断，如果flag标记还是false，直接退出函数
            flag = false //如果flag标记是true，先将flag标记改成false，现在只能进行这一次操作
            setTimeout(function(){ //延时定时器
                flag = true //将flag标记一秒钟之后才改回true 这样只有在执行完这次操作之后的一秒钟后才能进行下一次操作
                console.log("flag改回了true")
            },1000)
            console.log(count++) //这是节流操作需要自己写的代码 即进行什么样的操作 计数器加一
        }
    })()

    /*上面代码的执行步骤：
    * 在立即执行函数中
    * 1.第一次进行点击事件操作时，回调函数执行，flag标记默认值为true，通过了判断，可以执行接下来的操作，
    *  先将flag标记改成false，这样如果再次进行第二次点击操作，回调函数执行，因为flag标记为false，回调函数直接退出，第二次点击事件不生效
    * 2.回到在刚刚的第一次点击事件的回调函数执行中，生成一个延时定时器，规定在操作结束的一秒钟之后将flag标记改成true，
    *  这样执行完这次操作后一秒就能接着进行下一次操作，这次的操作是计数器加一，一秒钟之后，flag标记真正改回了true，第一次点击事件的所有操作完成
    * 3.在第一次点击事件操作完成之后，flag标记又是为true，这时如果再次进行新的点击事件操作，回调函数执行，flag标记通过判断，又可以执行后续代码，
    *  又再次将flag标记改成false，防止在这次操作过程中又进行新的点击事件操作
    * 4.继续回到刚刚第二次点击事件的回调函数执行中，又生成一个新的延时定时器，规定在操作结束的一秒钟之后将flag标记改成true，操作是将计数器加一，
    *  将计数器加一的操作结束之后一秒钟，flag标记真正改成了true，第二次点击事件的所有操作完成，又能进行新的点击事件操作
    *
    * */


</script>
</body>
</html>